<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>{{message}}</h2>
    <h2>总价格：{{totalPrice}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'simplelu',
            books: [
                {id: 101, name: '书1', price: 56},
                {id: 102, name: '书2', price: 96},
                {id: 103, name: '书3', price: 53},
                {id: 104, name: '书4', price: 42},
                {id: 105, name: '书5', price: 52}
            ]
        },
        computed: {
            totalPrice: function () {
                //方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值
                // https://www.cnblogs.com/zhaofeis/p/10620226.html、https://www.runoob.com/jsref/jsref-reduce.html
                return this.books.reduce(function(prev, cur) {
                    return cur.price + prev;
                }, 0)
                let result = 0
                for (let i = 0; i < this.books.length; i++) {
                    result += this.books[i].price
                }
                return result
                // ES6语法更简便
                // for (let i in this.books) {
                //
                // }
                //
                // for (let book of this.books) {
                //
                // }
            }
        }
    })
</script>
</body>
</html>